<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name = "format-detection" content = "telephone=no">
    <title>填写简历</title>
    <script src="js/rem.js"></script>
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/mobiscroll.min.js"></script>
    <link rel="stylesheet" href="css/mobiscroll.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            -webkit-tap-highlight-color: transparent;
        }

        html,
        body {
            height: 100%;
        }

        a {
            text-decoration: none;
        }

        li {
            list-style: none;
        }

        input {
            display: block;
            border: 0;
            outline: none;
            background-color: transparent;
            -webkit-appearance: none;
            /*清除ios默认圆角*/
        }

        .main {
            width: 7rem;
            margin: 0 auto;
            padding: 0 0.25rem 0.6rem;
            background-color: #f5f5f7;
        }

        .resumeTit {
            font-size: 0.3rem;
            color: #666666;
            padding: 0.3rem 0 0.2rem;
        }

        .resumeBox {
            background-color: #fff;
            padding-left: 0.24rem;
            border-radius: 6px;
        }

        .resumeList {
            position: relative;
            overflow: hidden;
            padding: 0.3rem 0;
            border-bottom: 1px solid #cccccc;
        }

        .resumeList:last-child {
            border: 0;
        }

        .tit {
            float: left;
            font-size: 0.28rem;
            color: #666666;
        }

        .info {
            float: right;
            padding-right: 0.25rem;
            max-width: 70%;
            font-size: 0.28rem;
            color: #666666;
            text-align: right;
        }


        .demo-non-form1,
        .demo-non-form2,
        .demo-non-form3 {
            float: right;
            margin-right: 0.55rem;
            padding-right: 0.25rem;
            max-width: 60%;
            font-size: 0.28rem;
            color: #666666;
            text-align: right;
        }

        .arrow {
            display: block;
            width: 0.15rem;
            height: 0.28rem;
            position: absolute;
            right: 0.25rem;
            top: 50%;
            margin-top: -0.14rem;
            background: url(images/rArrow.jpg) no-repeat;
            background-size: cover;
        }

        .fileBox {
            border-radius: 6px;
            overflow: hidden;
            background-color: #fff;
            padding: 0.25rem 0;
        }

        .fileList {
            position: relative;
            float: left;
            margin-left: 0.25rem;
            width: 1.4375rem;
            height: 1.4375rem;
            border: 2px solid #cccccc;
            box-sizing: border-box;
        }

        .fileList img {
            display: block;
            width: 100%;
            height: 100%;
        }

        .delIcon {
            display: block;
            width: 0.26rem;
            height: 0.26rem;
            position: absolute;
            top: 0.05rem;
            right: 0.05rem;
            background: url(images/delIcon.jpg) no-repeat;
            background-size: cover;
        }

        .commentFile {
            position: relative;
            float: left;
            margin-left: 0.25rem;
            width: 1.4375rem;
            height: 1.4375rem;
            border: 2px dashed #cccccc;
            box-sizing: border-box;
            background: url(images/comFileImg.jpg) center center no-repeat;
            background-size: 0.57rem 0.5rem;
        }

        .fileIpt {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
        }

        .sub {
            width: 7.5rem;
            height: 1.34rem;
            margin: 0 auto;
            background: url(images/subBtn.jpg) center center no-repeat #fff;
            background-size: 7.03rem 0.88rem;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="resumeMain">
            <div class="resumeTit">基本资料</div>
            <ul class="resumeBox">
                <li class="resumeList">
                    <div class="tit">姓&nbsp;&nbsp;&nbsp;&nbsp;名：</div>
                    <input class="info" type="text" placeholder="崔晓涛">
                </li>
                <li class="resumeList">
                    <div class="tit">性&nbsp;&nbsp;&nbsp;&nbsp;别：</div>
                    <input class="info" type="text" placeholder="男">
                </li>
                <li class="resumeList">
                    <div class="tit">电&nbsp;&nbsp;&nbsp;&nbsp;话：</div>
                    <input class="info" type="text" placeholder="18912345678">
                </li>
                <li class="resumeList">
                    <div class="tit">学&nbsp;&nbsp;&nbsp;&nbsp;历：</div>
                    <input class="info" type="text" placeholder="本科">
                </li>
                <li class="resumeList">
                    <div class="tit">院&nbsp;&nbsp;&nbsp;&nbsp;校：</div>
                    <input class="info" type="text" placeholder="未填写">
                </li>
                <li class="resumeList">
                    <div class="tit">专&nbsp;&nbsp;&nbsp;&nbsp;业：</div>
                    <input class="info" type="text" placeholder="未填写">
                </li>
            </ul>
        </div>
        <div class="resumeMain">
            <div class="resumeTit">期望工作</div>
            <ul class="resumeBox">
                <li class="resumeList">
                    <div class="tit">职位类型：</div>
                    <div class="demo-container">
                        <select name="City" id="demo-non-form1">
                            <option value="1">互联网</option>
                            <option value="2">金融</option>
                            <option value="3">餐饮</option>
                            <option value="4">化工</option>
                            <option value="5">文案</option>
                            <option value="6">1</option>
                            <option value="7">2</option>
                            <option value="8">3</option>
                            <option value="9">4</option>
                        </select>
                    </div>
                    <i class="arrow"></i>
                </li>
                <li class="resumeList">
                    <div class="tit">工作类型：</div>
                    <div class="demo-container">
                        <select name="City" id="demo-non-form2">
                            <option value="1">请选择</option>
                            <option value="2">金融</option>
                            <option value="3">餐饮</option>
                            <option value="4">化工</option>
                            <option value="5">文案</option>
                            <option value="6">1</option>
                            <option value="7">2</option>
                            <option value="8">3</option>
                            <option value="9">4</option>
                        </select>
                    </div>
                    <i class="arrow"></i>
                </li>
                <li class="resumeList">
                    <div class="tit">期望薪资：</div>
                    <div class="demo-container">
                        <select name="City" id="demo-non-form3">
                            <option value="1">请选择</option>
                            <option value="2">金融</option>
                            <option value="3">餐饮</option>
                            <option value="4">化工</option>
                            <option value="5">文案</option>
                            <option value="6">1</option>
                            <option value="7">2</option>
                            <option value="8">3</option>
                            <option value="9">4</option>
                        </select>
                    </div>
                    <i class="arrow"></i>
                </li>
            </ul>
        </div>
        <div class="resumeMain">
            <div class="resumeTit">简历附件</div>
            <div class="fileBox">
                <div class="fileList">
                    <img src="images/fileImg.jpg" alt="">
                    <i class="delIcon"></i>
                </div>
                <div class="fileList">
                    <img src="images/fileImg.jpg" alt="">
                    <i class="delIcon"></i>
                </div>
                <div class="fileList">
                    <img src="images/fileImg.jpg" alt="">
                    <i class="delIcon"></i>
                </div>
                <div class="commentFile">
                    <input class="fileIpt" type="file">
                </div>
            </div>
        </div>
    </div>

    <div class="sub"></div>

    <script>
        mobiscroll.settings = {
            theme: 'ios'
        };

        $(function () {

            $('#demo-non-form1').mobiscroll().select({
                theme: 'ios',
                display: 'bottom',
                minWidth: 200,
                inputClass: 'demo-non-form1'
            });
            $('#demo-non-form2').mobiscroll().select({
                theme: 'ios',
                display: 'bottom',
                minWidth: 200,
                inputClass: 'demo-non-form2'
            });
            $('#demo-non-form3').mobiscroll().select({
                theme: 'ios',
                display: 'bottom',
                minWidth: 200,
                inputClass: 'demo-non-form3'
            });

        });
    </script>
</body>

</html>